<template>
	<view v-if="!loading">
		<view class="top">
			<div class="top_title">欢迎登录</div>
			<div class="top_text">寻道管理系统</div>
		</view>
		<view class="form">
			<form @submit="submit">
				<view class="form_content" v-bind:class="[focus == 1 ? 'hover' : '']">
					<image src="../../static/images/login_phone.png" />
					<input @focus="input_focus(1)" maxlength="11" name="userPhone" placeholder="请输入手机号" placeholder-class="placeholder" />
				</view>
				<view class="form_content" style="margin-top: 80rpx" v-bind:class="[focus == 1 ? 'hover' : '']">
					<image src="../../static/images/login_password.png" />
					<input @focus="input_focus(2)" :type="show_type == 1 ? 'text' : 'password'" name="userPassword" placeholder="请输入密码"
					 placeholder-class="placeholder" />
					<image v-if="show_type == 1" src="../../static/images/login_show.png" @click="show_status()" />
					<image v-else src="../../static/images/login_hide.png" @click="show_status()" />
				</view>
				<view class="forget" @click="to_forget()">忘记密码</view>
				<button form-type="submit" class="submit">登录</button>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		login,
		verifyToken
	} from "@/service/api/api";
	export default {
		data() {
			return {
				focus: 0,
				show_type: 0,
				submit_loading: false,
				loading: false
			}
		},
		created() {
			if (uni.getStorageSync('token') && uni.getStorageSync('user_info')) {
				this.loading = true
				uni.showLoading({
				    title: '加载中'
				});
				this.verify_token()
			}
		},
		methods: {
			verify_token() {
				let obj = {}
				verifyToken(obj).then((res) => {
					uni.hideLoading(); 
					if (!res.data.data) {
						let user_info = uni.getStorageSync('user_info')
						this.to_index(user_info['role'])
					}
					else{
						this.loading = false
					}
				})
			},
			submit(e) {
				if (!this.check_phone(e.detail.value['userPhone'])) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (e.detail.value['userPassword'].length == 0) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				if (this.submit_loading) return false
				let obj = {}
				obj['userPhone'] = e.detail.value['userPhone']
				obj['userPassword'] = e.detail.value['userPassword']
				this.submit_loading = true
				login(obj).then((res) => {
					this.submit_loading = false
					if (res.data.code == 0) {
						let role = []
						let arr = res.data.data[0]['ucRoleUsers']
						for (let i = 0; i < arr.length; i++) {
							if (arr[i]['roleId'] == 143 || arr[i]['roleId'] == 144 || arr[i]['roleId'] == 148 || arr[i]['roleId'] == 150 || arr[i]['roleId'] == 139 || arr[i]['roleId'] == 129 || arr[i]['roleId'] == 155) {
								role.push(arr[i]['roleId'])
							}
						}
						if (role.length == 0) {
							uni.showToast({
								title: '账号没有权限',
								icon: 'none'
							})
							return
						} else {
							if (role.length == 2) {
								let userPhone = res.data.data[0].userPhone
								let getRoleVal = uni.getStorageSync(userPhone) || ''
								if(getRoleVal) {	//判断是否有缓存身份
									res.data.data[0]['role'] = getRoleVal
								} else {
									res.data.data[0]['role'] = role[0]
								}
							} else {
								res.data.data[0]['role'] = role[0]
							}
							res.data.data[0]['role_list'] = role
						}
						
						if(res.data.data && res.data.data.length >= 4) {
							res.data.data[0]['deptName'] = res.data.data[4]['deptName'] || ''
							res.data.data[0]['deptId'] = res.data.data[4]['deptId'] || ''
							res.data.data[0]['deptLevel'] = res.data.data[4]['deptLevel'] || ''
						}
						
						uni.setStorageSync('user_info', res.data.data[0])
						uni.setStorageSync('token', res.data.data[1])
						let btnPowerArr = {}
						for(let item of res.data.data[3]) {
							btnPowerArr[item.functionCode] = item.functionName
						}
						uni.setStorageSync('btnPowerArr', btnPowerArr)
						this.to_index(res.data.data[0]['role'])
					} else {
						uni.showToast({
							title: res.data.errMsg,
							icon: 'none'
						})
					}
				}).catch(err => {
					this.submit_loading = false
				})
			},
			to_index(role) {
				let userInfo = uni.getStorageSync('user_info')
				if (role == '148') {
					uni.reLaunch({
						url: '/pages/home/manager/index'
					})
				} else if(role == '143' || role == '144') {
					uni.reLaunch({
						url: '/pages/reportForm/storeManager/home/index'
					})
				} else if(role == '129') {
					uni.reLaunch({
						url: '/pages/reportForm/region/home/group'
					})
				} else if(role == '139') {
					uni.reLaunch({
						url: '/pages/reportForm/region/home/index'
					})
				} else if(role == '155') {
					if (userInfo.userDeptId == userInfo.deptId && userInfo.deptLevel == '30') {
						uni.reLaunch({
							url: '/pages/reportForm/region/home/group'
						})
					} else {
						uni.reLaunch({
							url: '/pages/reportForm/region/home/index'
						})
					}
				} else {
					uni.reLaunch({
						url: '/pages/home/adviser/index'
					})
				}
			},
			show_status() {
				this.show_type = this.show_type == 1 ? 0 : 1
			},
			to_forget() {
				uni.navigateTo({
					url: '/pages/login/forget'
				})
			},
			input_focus(index) {
				this.focus = index
			},
			check_phone(phone) {
				let reg = new RegExp("^[1][3,4,5,6,7,8,9][0-9]{9}$");
				return reg.test(phone)
			}
		}
	}
</script>

<style scoped>
	.form_content:hover {
		border-bottom: 1rpx solid #75AAFF;
	}

	.placeholder {
		color: #A1A0AE;
	}

	.submit {
		width: 650rpx;
		height: 104rpx;
		line-height: 104rpx;
		border-radius: 8rpx;
		background: linear-gradient(118deg, #61A4FC 0%, #3B86FF 100%);
		margin: 0 auto;
		text-align: center;
		color: #fff;
		margin-top: 200rpx;
		box-shadow: 0rpx 12rpx 30rpx rgba(116, 169, 255, 0.55);
	}

	.forget {
		color: #A5A4BF;
		font-size: 28rpx;
		text-align: right;
		padding-top: 30rpx;
	}

	.form {
		padding: 0 50rpx;
		padding-top: 230rpx;
	}

	.form_content {
		color: #43425D;
		border-bottom: 1rpx solid #D2D1DF;
		font-size: 32rpx;
		display: flex;
	}

	.form_content image {
		width: 32rpx;
		height: 32rpx;
		margin-top: 25rpx;
	}

	.form_content input {
		line-height: 75rpx;
		height: 75rpx;
		margin-left: 72rpx;
		width: 100%;
		font-size: 32rpx;
	}

	.top {
		padding-left: 50rpx;
	}

	.top_title {
		color: #333;
		font-size: 60rpx;
		line-height: 60rpx;
		padding-top: 230rpx;
	}

	.top_text {
		color: #3B86FF;
		font-size: 40rpx;
		line-height: 40rpx;
		padding-top: 60rpx;
	}
</style>
